import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Empty, Skeleton, Spin } from 'antd';
import { resDynamicList } from '@/services/dynamic';
import { useInfiniteScroll } from 'ahooks';
import DynamicItem from '@/components/DynamicItem';
import NoMore from '@/components/NoMore';

const DynamicPage: FC<PropsWithChildren<{}>> = () => {
  const { data, loading, loadingMore, noMore } = useInfiniteScroll<
    API.PaginationResult<API.DynamicStruct>
  >(
    (currentData) => {
      return resDynamicList({
        pageSize: 10,
        current: Math.ceil(currentData?.list.length! / 10 || 0) + 1,
      });
    },
    {
      target: document,
      isNoMore: (d) => {
        return !d || d?.list.length >= d?.total;
      },
      threshold: 100,
    }
  );

  const paragraph = { rows: 4 };

  return (
    <div>
      {loading && (
        <div className={'mx-auto w-[810px]'}>
          <Skeleton
            loading={loading}
            active
            avatar
            round
            paragraph={paragraph}
          />
          <Skeleton
            loading={loading}
            active
            avatar
            round
            paragraph={paragraph}
          />
          <Skeleton
            loading={loading}
            active
            avatar
            round
            paragraph={paragraph}
          />
        </div>
      )}
      <div
        className={
          'flex min-h-[50vh] justify-center max-w-[1200px] mt-8 mx-auto'
        }
      >
        {
          <div className={'space-y-8  w-[810px] mx-auto'}>
            {data && data?.list.length > 0
              ? data.list.map((value) => (
                  <DynamicItem data={value} showTool={false} key={value.id} />
                ))
              : null}
          </div>
        }
      </div>
      <div className={"w-[810px] mx-auto"}>
        {data && data.list.length > 0 && (
          <div className={'w-[75%] mb-16 mx-auto '}>
            <NoMore loadingMore={loadingMore} noMore={noMore} />
          </div>
        )}
        {!loading && data && data.list.length === 0 && <Empty />}
      </div>
    </div>
  );
};

export default memo(DynamicPage);
